<template>
  <div class="bottom-bar">
    <div class="bottom-bar-item">
      <img src="../../../assets/img/detail/客服.svg">
      <div>客服</div>
    </div>
    <div class="bottom-bar-item">
      <img src="../../../assets/img/detail/店铺.svg">
      <div>店铺</div>
    </div>
    <div class="bottom-bar-item " @click="isShow=!isShow">
      <img src="../../../assets/img/detail/收藏.svg" v-show="isShow">
      <img src="../../../assets/img/detail/收藏-选中.svg"  v-show="!isShow">
      <div>收藏</div>
    </div>
    <div class="bottom-bar-item2 to-cart"  :plain="true" @click="toCart" >
      加入购物车
    </div>
    <div class="bottom-bar-item2 to-buy">购买</div>
  </div>
</template>

<script>
  import {ElMessage} from "element-plus";
  import { defineComponent, h } from 'vue'

  export default {
    name: "DetailButtonBar",
    data(){
      return{
        isShow:true,
      }
    },
    setup() {
      return {
        open1() {
          ElMessage.success({
            message: '添加购物车成功',
            type: 'success',
            center:true,
            offset:200,
            duration:500
          });
        }
      }
    },
    methods:{
      toCart(){
        this.open1()//提示信息
        this.$emit('toCartClick')
      }
    }
  }
</script>

<style scoped>
 .bottom-bar{
   position: fixed;
   display: flex;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 2;
   height: 49px;
   background-color: white;

 }
  .bottom-bar-item{
    width: 16%;
    font-size: 13px;
    text-align: center;
    padding-top:3px ;
  }
 .bottom-bar-item img{
   width: 23px;
   height: 23px;
 }
  .bottom-bar-item2{
    flex:1;
    text-align: center;
    font-size: 14px;
    line-height: 49px;
  }
  .to-cart{
    background-color: #FF4500;
  }
  .to-buy{
    background-color: 	#EEEE00;
  }

</style>